﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>录入采购需求</title>
    <link href="css/style.css" rel="stylesheet">
    <script src="/js/vue2.js"></script>
    <script src="/js/axios.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f8f8;
            color: #333;
            margin: 0;
            padding: 0;
            overflow-y: auto;
        }
        .container {
            width: 90%;
            margin: 5px auto; /* 进一步减小外边距 */
            background-color: #fff;
            padding: 5px; /* 进一步减小内边距 */
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 减小阴影 */
            border-radius: 3px; /* 减小圆角 */
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 5px; /* 减小表格顶部的外边距 */
        }
        th, td {
            padding: 4px; /* 进一步减小单元格内边距 */
            text-align: center;
            border: 1px solid #ddd;
            font-size: 12px; /* 再次减小字体大小 */
            line-height: 1.2; /* 减小行高 */
        }
        th {
            background-color: #f2f2f2;
            color: #333;
        }
        .button-container {
            margin-top: 10px; /* 减小按钮容器的顶部外边距 */
            text-align: center;
        }
        .material-button, .action-button {
            padding: 4px 8px; /* 减小按钮的内边距 */
            margin: 2px;
            background-color: #336699;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px; /* 减小按钮字体大小 */
            transition: background-color 0.3s;
        }
        .material-button:hover, .action-button:hover {
            background-color: #28527a;
        }
        .pagination {
            margin-top: 10px; /* 减小分页控件的顶部外边距 */
            text-align: center;
            font-size: 12px; /* 调整分页字体大小 */
        }
        .pagination button {
            padding: 3px 6px; /* 减小分页按钮的内边距 */
            margin: 0 1px;
            background-color: #0070c0;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px; /* 调整按钮字体大小 */
            transition: background-color 0.3s;
        }
        .pagination button:hover {
            background-color: #005f8a;
        }
        .pagination button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .status-uncompleted {
            color: red;
        }
        .status-completed {
            color: green;
        }
        textarea {
            width: 100%;
            height: 40px; /* 减小高度 */
            font-size: 12px;
            padding: 4px; /* 减小内边距 */
        }
        input[type="text"], input[type="date"] {
            width: 100%;
            padding: 4px;
            font-size: 12px;
            height: 24px; /* 减小输入框高度 */
            box-sizing: border-box;
        }
        input[type="radio"] {
            transform: scale(0.8); /* 缩小单选按钮 */
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <table align="center" border="0">
            <tr>
                <td align="center" style="font-size: 14px; padding: 5px;">
                    选择物资 ====&gt; <font color="red">录入需求计划</font> ====&gt; 需求计划确认
                </td>
            </tr>
        </table>
        <center>
            <div>
                <div class="pagination">
                    <button @click="prevPage" :disabled="pageNum === 1">上一页</button>
                    <button @click="nextPage" :disabled="pageNum === totalPages">下一页</button>
                    <span>&nbsp;共 {{ totalItems }} 个需求计划 每页 {{ pageSize }} 个需求计划 页次: {{ pageNum }}/{{ totalPages }}页</span>
                </div>
                <table id="table1">
                    <tr>
                        <th>选择</th>
                        <th>序号</th>
                        <th>产品编码</th>
                        <th>产品名称</th>
                        <th>计量单位</th>
                        <th>状态</th>
                    </tr>
                    <tr v-for="(material, index) in materials" :key="material.id">
                        <td align="center">
                            <input type="radio" name="p_orderno" :value="material.id" @click="changeData(material)">
                        </td>
                        <td>{{ index + 1 + (pageNum - 1) * pageSize }}</td>
                        <td>{{ material.materialNum }}</td>
                        <td>{{ material.materialName }}</td>
                        <td>{{ material.materialUnit }}</td>
                        <td :class="{'status-uncompleted': materialStatuses[material.id] === '未完成', 'status-completed': materialStatuses[material.id] === '完成'}">
                            {{ materialStatuses[material.id] }}
                        </td>
                    </tr>
                </table>
            </div>
            <div v-if="selectedMaterial.id">
                <table id="table2">
                    <tr>
                        <th>物资编码</th>
                        <td>{{ selectedMaterial.materialNum }}</td>
                    </tr>
                    <tr>
                        <th>物资名称</th>
                        <td>{{ selectedMaterial.materialName }}</td>
                    </tr>
                    <tr>
                        <th>数量</th>
                        <td>
                            <input type="text" v-model="quantity" @blur="isZero(quantity, 'quantityInput')">
                        </td>
                    </tr>
                    <tr>
                        <th>计量单位</th>
                        <td>{{ selectedMaterial.materialUnit }}</td>
                    </tr>
                    <tr>
                        <th>预单价(元)</th>
                        <td><input type="text" v-model="price"></td>
                    </tr>
                    <tr>
                        <th>开始交货期</th>
                        <td><input type="date" v-model="startDate"></td>
                    </tr>
                    <tr>
                        <th>结束交货期</th>
                        <td><input type="date" v-model="endDate"></td>
                    </tr>
                    <tr>
                        <th>备注</th>
                        <td><textarea v-model="remark"></textarea></td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: center;">
                            <font color="red"><b>附件上传说明：文件大小不能超过4M。</b></font>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="button-container">
                <button class="action-button" @click="redirectToSelection">重新选择物资</button>
                <button class="action-button" @click="submitForm">保存</button>
                <button class="action-button" @click="submitFormAndRedirect">全部需求录入完毕</button>
            </div>
        </center>
    </div>
</div>



<script>
    new Vue({
        el: '#app',
        data: {
            materialStatuses:{},
            materials: [],
            selectedMaterial: {},
            quantity: {},
            price: {},
            startDate: {},
            endDate:{},
            remark: '',
            pageNum: 1, // 当前页码
            pageSize: 5, // 每页数量
            totalItems: 0, // 物资总数
            totalPages: 1, // 总页数
        },
        created() {
            this.loadMaterials();
        },
        methods: {
            // 加载物资信息
            loadMaterials() {
                const params = new URLSearchParams(window.location.search);
                const materialIds = params.get('selectedMaterials');
                axios.get('/findMaterialByIds', {
                    params: {
                        materialIds: materialIds,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                    }
                })
                    .then(response => {
                        const data = response.data;
                        this.materials = data.data;
                        this.totalItems = data.total;
                        this.materials.forEach(material => {
                            this.$set(this.materialStatuses, material.id, '未完成');
                        });
                        this.totalPages = Math.ceil(this.totalItems / this.pageSize);
                    })
                    .catch(error => {
                        console.error('获取物资信息出错：', error);
                    });
            },
            changeData(material) {
                this.selectedMaterial = material;
                this.quantity = null;
                this.price = null;
                this.startDate = '';
                this.remark = '';
            },
            isZero(value, inputName) {
                if (value == 0) {
                    alert("数量不能为空！");
                    this.$refs[inputName].focus();
                }
            },
            redirectToSelection() {
                window.location.href = 'pclass_select.html';
            },
            submitForm() {
                if (!this.price || !this.startDate) {
                    alert("单价和交货期不能为空");
                    return false;
                }
                const orderData = {
                    materialCode: this.selectedMaterial.materialNum,
                    materialName: this.selectedMaterial.materialName,
                    measureUnit: this.selectedMaterial.materialUnit,
                    amount: this.quantity,
                    unitPrice: this.price,
                    startDate: this.startDate,
                    endDate:this.endDate,
                    remark: this.remark
                };
                axios.post('/addOrder', orderData)
                    .then(response => {
                        alert("保存成功，请选择下一条要保存的数据！");
                        // 更新物资状态
                        this.materialStatuses[this.selectedMaterial.id] = '完成';
                        this.selectedMaterial = {};
                    })
                    .catch(error => {
                        console.error('提交出错：', error);
                    });
            },
            hasUncompletedMaterials() {
                return Object.values(this.materialStatuses).includes('未完成');
            },
                submitFormAndRedirect() {
                    if (this.hasUncompletedMaterials()) {
                        if (confirm("还有未完成的物资，是否继续录入？")) {
                            // 用户选择继续
                            // 可以在这里添加逻辑，比如再次提交数据
                        } else {
                            // 用户选择不继续
                            window.location.href= 'Order_ytb_list.html';
                        }
                    } else {
                        // 没有未完成的物资，跳转到其他页面
                        window.location.href = 'Order_ytb_list.html';
                    }
                // 提交数据并跳转到其他页面的逻辑
            },
            prevPage() {
                if (this.pageNum > 1) {
                    this.pageNum--;
                    this.loadMaterials();
                }
            },
            nextPage() {
                if (this.pageNum < this.totalPages) {
                    this.pageNum++;
                    this.loadMaterials();
                }
            }
        }
    });
</script>
</body>
</html>
